<template>
    <!--预定房间-->
    <div class="room-table" id="_j_booking_info" style="margin-top: -40px">
        <!--头部标题-->
        <ul class="thd">
            <li class="td-room">房型</li>
            <li class="td-person">人数上限</li>
            <li class="td-policy">相关决策</li>
            <li class="td-price">
                价格
                <span class="not-tax" id="lbTaxInfo"></span>
            </li>
            <li class="td-action">预定房间数</li>
        </ul>

        <!--预定房间信息-->
        <!--1-->
        <div id="box_room_list" class="ota_room_box">
            <!--豪华双床房-->
            <div class="row-item clearfix" v-for="item in box_room.ota_room_box" :key="item.id">
                <div class="td-room">
                    <div class="room-name">{{item.room_name}}</div>
                    <p></p>
                </div>
                <!--2-->
                <div class="sub-group clearfix">
                    <!--人数上限-->
                    <div class="td-person">
                        <div>
                            <i class="icon-bg icon-person icon-p2"></i>
                            {{item.td_person}}
                        </div>
                    </div>
                    <!--相关决策-->
                    <ul class="td-policy text-left">
                        <li>{{item.td_policy1}}</li>
                        <li class="c-red">{{item.td_policy2}}</li>
                        <li>{{item.td_policy3}}</li>
                        <li>{{item.td_policy4}}</li>
                    </ul>
                    <!--价格-->
                    <div class="td-price td_pic">
                        <strong>￥{{item.td_price}}</strong>
                        <strong style="font-size: 12px; font-style: normal;font-weight: normal; display: inline-block; margin-left: 5px; vertical-align: 1px;">
                            {{item.td_pic}}
                        </strong>
                    </div>
                    <!--预定房间数量-->
                    <div class="td-action">
                        <div class="sel-roomnumm">
                            <div>
                                <div class="vertical">
                                    <select id="mySelect">
                                        <option v-for="index of num" :key="index.id" v-text="index"></option>
                                    </select>
                                </div>
                                <span class="caret">
                                    <i></i>
                                </span>
                            </div>
                        </div>
                        <a class="btn-actionn" href="#" @click="initialize(item.Id)">预定</a>
                    </div>
                </div>
            </div>
            <!--尊贵客房-->
            <div class="row-item clearfix" v-for="item in box_room.ota_room_boxs" :key="item.id">
                <div class="td-room">
                    <div class="room-name">{{item.room_name}}</div>
                    <p></p>
                </div>

                <!--2-->
                <!--人数上限-->
                <div class="sub-group clearfix">
                    <!--人数上限-->
                    <div class="td-person">
                        <div>
                            <i class="icon-bg icon-person icon-p2"></i>
                            {{item.td_person}}
                        </div>
                    </div>
                    <!--相关决策-->
                    <ul class="td-policy text-left">
                        <li>{{item.td_policy1}}</li>
                        <li class="c-red">{{item.td_policy2}}</li>
                        <li>{{item.td_policy3}}</li>
                        <li>{{item.td_policy4}}</li>
                    </ul>
                    <!--价格-->
                    <div class="td-price td_pic">
                        <strong>￥{{item.td_price}}</strong>
                        <strong style="font-size: 12px; font-style: normal;font-weight: normal; display: inline-block; margin-left: 5px; vertical-align: 1px;">
                            {{item.td_pic}}
                        </strong>
                    </div>
                    <!--预定房间数量-->
                    <div class="td-action">
                        <div class="sel-roomnumm">
                            <div>
                                <div class="vertical">
                                    <select id="mySelects">
                                        <option v-for="index of num" :key="index.id" v-text="index"></option>
                                    </select>
                                </div>
                                <span class="caret">
                                    <i></i>
                                </span>
                            </div>
                        </div>
                        <a class="btn-actionn" href="#" @click="initialize(item.Id)">预定</a>
                    </div>
                </div>

                <!--3-->
                <!--人数上限-->
                <div class="sub-group clearfix" v-for="item in box_room.ota_room_boxsx" :key="item.id">
                    <div class="td-person">
                        <div>
                            <i class="icon-bg icon-person icon-p2"></i>
                            {{item.td_persons}}
                        </div>
                    </div>
                    <!--相关决策-->
                    <ul class="td-policy text-left">
                        <li>{{item.td_policy1s}}</li>
                        <li class="c-red">{{item.td_policy2s}}</li>
                        <li>{{item.td_policy3s}}</li>
                        <li>{{item.td_policy4s}}</li>
                    </ul>
                    <!--价格-->
                    <div class="td-price td_pic">
                        <strong>￥{{item.td_prices}}</strong>
                        <strong style="font-size: 12px; font-style: normal;font-weight: normal; display: inline-block; margin-left: 5px; vertical-align: 1px;">
                            {{item.td_pics}}
                        </strong>
                    </div>
                    <!--预定房间数量-->
                    <div class="td-action">
                        <div class="sel-roomnumm">
                            <div>
                                <div class="vertical">
                                    <select id="mySelecssts">
                                        <option v-for="index of num" :key="index.id" v-text="index" id="number"></option>
                                    </select>
                                </div>
                                <span class="caret">
                                    <i></i>
                                </span>
                            </div>
                        </div>
                        <a class="btn-actionn" href="#" @click="initialize(item.Id)">预定</a>
                    </div>
                </div>

            </div>
        </div>
        <!--111111111111111111111-->
        <div class="not-found" id="room_nofound" style="display: none">
            您选择的日期或人数无空房，请修改后再尝试.
        </div>
        <div class="hotel-loading" id="room_loading" style="display: none">
            <i class="loading-m"></i>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Reservation",
        props:["box_room"],
        data(){
            return{
                num: 3
            }
        },mounted() {
            // this.query(this.$route.query.keyword)
        },methods:{
            // eslint-disable-next-line no-unused-vars
            initialize:function (Id) {
                let number=document.getElementById("number").innerText;
                this.$emit('changeUrl',Id,number);
            }
        },
        created:function () {
            // eslint-disable-next-line no-undef
            $(function () {
                //$("#mySelect").select(); 不传参数可以这样写
                // eslint-disable-next-line no-undef
                $("#mySelect").select({width: "60px"});
            });

            // eslint-disable-next-line no-undef
            if (typeof M !== "undefined" && typeof M.loadResource === "function") {
                // eslint-disable-next-line no-undef
                M.loadResource(
                    "http://js.mafengwo.net/js/cv/js+Dropdown:js+pageletcommon+pageHeadUserInfoWWWNormal:js+jquery.tmpl:js+M+module+InputListener:js+M+module+SuggestionXHR:js+M+module+DropList:js+M+module+Suggestion:js+M+module+MesSearchEvent:js+SiteSearch:js+AHeader:js+M+module+PageAdmin:js+M+module+Storage:js+M+module+Cookie:js+M+module+ResourceKeeper:js+jquery.jgrowl.min:js+AMessage:js+M+module+dialog+Layer:js+M+module+dialog+DialogBase:js+M+module+dialog+Dialog:js+M+module+dialog+alert:js+M+module+FrequencyVerifyControl:js+M+module+FrequencySystemVerify:js+ALogin:js+M+module+ScrollObserver:js+M+module+QRCode:js+AToolbar:js+ACnzzGaLog:js+ARecruit:js+ALazyLoad:youyudf+js+hotel+jquery.mfwSelect:js+MouseTip:js+hotel+module+Hash:js+hotel+module+ModuleProvider:js+hotel+module+ImageLoader:js+hotel+module+Album:js+hotel+module+AlbumComment:js+hotel+module+Log:js+hotel+module+FavDialog:js+hotel+mfwmap+mfwmap-util:js+hotel+mfwmap+mfwmap-event:js+hotel+mfwmap+mfwmap-runtime-google:js+hotel+mfwmap+mfwmap-runtime-amap:js+hotel+mfwmap+mfwmap-runtime-leaflet:js+hotel+mfwmap+mfwmap:js+hotel+mfwmap+mfwmap-overlays:js+xdate:js+hotel+module+BookingDate:js+jquery.scrollTo:youyudf+js+hotel+index_v3:js+hotel+module+FestivalDateConfig:js+jquery-ui-core:js+jquery-ui-datepicker:js+hotel+module+DateRangePicker:youyudf+js+hotel+index_booking:js+M+module+Pagination:js+M+module+TopTip:youyudf+js+hotel+index_comment:js+hotel+module+ZxRoomDetailDialog:js+hotel+module+BookingGuests:js+hotel+module+NumberGuestsPicker:js+jquery.mfwSelect:js+hotel+module+OtaCommonZx:youyudf+js+hotel+zx_detail_roomlist:js+hotel+pc_app_guide^YlBVSw^1584071349.js"
                );
            }
        }
    }
</script>

<style scoped>
   @import "http://css.mafengwo.net/css/cv/css+hotel+detail:css+hotel+datepicker-range:css+hotel_pop:css+mdd+hotel_fav:css+mdd+map-mark.v2:css+hotel+number_guests_picker:css+jquery-ui-1.9.1.custom.min:css+hotel+sign+index^YlJb^1552035728.css";

    .text-left{
        text-align: left;
        margin-left: 100px;
    }

    .td_pic{
        margin-left: -90px;
    }

    .room-name{
        text-align: left;
    }

   .vertical {
       width: 200px;
       height:200px;
       position: absolute;
       left: 40%;/*配合margin-left的负值实现水平居中*/
       margin-left: -110px;
       top:40%;/*配合margin-top的负值实现垂直居中*/
       margin-top: -19px;
   }

    .sel-roomnumm{
        display: inline-block;
        *display: inline-block;
        *zoom: 1;
        width: 90px;
        line-height: 18px;
        position: relative;
        z-index: 9;
        left: 36px;
    }

    .sel-roomnumm.open{
        z-index: 5
    }

    /*预定*/
     .btn-actionn {
        padding: 2px 13px;
        position: relative;
        z-index: 10;
        float: right;
        line-height: 24px;
        background-color: #ffb200;
        color: #fff;
        border-radius: 4px;
        font-size: 14px;
         left: 10px;
         top: -6px;
    }

    .btn-actionn:hover {
       text-decoration: none;
       background-color: #ff9d00
   }
</style>